{% extends "base.html" %}

{% block content %}

<div class="container-1">
    <dl>
        <dt>block and inline</dt>
            <dd>div这类块状元素元素设置display:grid</dd>
            <dd>span这类内联元素设置display:inline-grid</dd>
        <dt>Grid布局即创建</dt>
        <dd class="code-block">
            <pre class="language-css line-numbers">
                <code>
                    div {
                        display: grid;
                    }
                    /* 此时该div就是“grid容器”，其子元素称为“grid子项”  */
                    /* grid和inline-grid区别在于，inline-grid容器为inline特性，因此可以和图片文字一行显示；
                    grid容器保持块状特性，宽度默认100%，不和内联元素一行显示。*/
                </code>
            </pre>
        </dd>
    </dl>
    
    <table border="1" width="100%" class="params_table" cellspacing="1" style="max-width:800px;">
        <thead>
            <tr>
                <th>作用在grid容器上</th>
                <th>作用在grid子项上</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="vertical-align: top;">
                    <ul>
                        <li><a href="#grid-template-columns-rows" title="">grid-template-columns</a></li>
                        <li><a href="#grid-template-columns-rows" title="">grid-template-rows</a></li>
                        <li><a href="#grid-template-areas" title="">grid-template-areas</a></li>
                        <li><a href="#grid-template" title="">grid-template</a></li>
                        <li><a href="#grid-column-row-gap" title="">grid-column-gap</a></li>
                        <li><a href="#grid-column-row-gap" title="">grid-row-gap</a></li>
                        <li><a href="#grid-gap" title="">grid-gap</a></li>
                        <li><a href="#justify-items" title="">justify-items</a></li>
                        <li><a href="#align-items" title="">align-items</a></li>
                        <li><a href="#place-items" title="">place-items</a></li>
                        <li><a href="#justify-content" title="">justify-content</a></li>
                        <li><a href="#align-content" title="">align-content</a></li>
                        <li><a href="#place-content" title="">place-content</a></li>
                        <li><a href="#grid-auto-columns-rows" title="">grid-auto-columns</a></li>
                        <li><a href="#grid-auto-columns-rows" title="">grid-auto-rows</a></li>
                        <li><a href="#grid-auto-flow" title="">grid-auto-flow</a></li>
                        <li><a href="#grid-grid" title="">grid</a></li>
                    </ul>
                </td>
                <td style="vertical-align: top;">
                    <ul>
                        <li><a href="#grid-column-row-se" title="">grid-column-start</a></li>
                        <li><a href="#grid-column-row-se" title="">grid-column-end</a></li>
                        <li><a href="#grid-column-row-se" title="">grid-row-start</a></li>
                        <li><a href="#grid-column-row-se" title="">grid-row-end</a></li>
                        <li><a href="#grid-column-row" title="">grid-column</a></li>
                        <li><a href="#grid-column-row" title="">grid-row</a></li>
                        <li><a href="#grid-area" title="">grid-area</a></li>
                        <li><a href="#justify-self" title="">justify-self</a></li>
                        <li><a href="#align-self" title="">align-self</a></li>
                        <li><a href="#place-self" title="">place-self</a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    <dl>
                        <dt></dt>
                        <dd>Grid布局是一个二维的布局方法，纵横两个方向总是同时存在</dd>
                        <dd>在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的</dd>
                        <dd>Grid布局则适用于更大规模的布局（二维布局），而Flexbox布局最适合应用程序的组件和小规模布局（一维布局）</dd>
                    </dl>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

<h1>作用在grid容器上的CSS属性</h1>
<div id="lineradioX" class="grid-radio-x">
    
    <dl>
        <dt>line name</dt>
        <dd>
            <span class="check-group">
                <input type="radio" id="lineName1" name="lineName" value="column-line1" checked="">
                <label for="lineName1" class="ui-radio"></label>
                <label for="lineName1" class="mr20">[第一根纵线]</label>
            </span>
            <span class="check-group">
                <input type="radio" id="lineName2" name="lineName" value="column-line2">
                <label for="lineName2" class="ui-radio"></label>
                <label for="lineName2" class="mr20">[纵线2]</label>
            </span>
            <span class="check-group">
                <input type="radio" id="lineName3" name="lineName" value="column-line3">
                <label for="lineName3" class="ui-radio"></label>
                <label for="lineName3" class="mr20">[纵线3]</label>
            </span>
            <span class="check-group">
                <input type="radio" id="lineName4" name="lineName" value="column-line4">
                <label for="lineName4" class="ui-radio"></label>
                <label for="lineName4" class="mr20">[最后的结束线]</label>
            </span>
        </dd>
            <p></p>
        <dd>
            <p>
                <span class="check-group">
                    <input type="radio" id="lineName5" name="lineName" value="row-line1">
                    <label for="lineName5" class="ui-radio"></label>
                    <label for="lineName5" class="mr20">[第一行开始]</label>
                </span>
                <span class="check-group">
                    <input type="radio" id="lineName6" name="lineName" value="row-line2">
                    <label for="lineName6" class="ui-radio">
                    </label><label for="lineName6" class="mr20">[第一行结束]</label>
                </span>
                <span class="check-group">
                    <input type="radio" id="lineName7" name="lineName" value="row-line3">
                    <label for="lineName7" class="ui-radio"></label>
                    <label for="lineName7" class="mr20">[行3]</label>
                </span>
                <span class="check-group">
                    <input type="radio" id="lineName8" name="lineName" value="row-line4">
                    <label for="lineName8" class="ui-radio"></label>
                    <label for="lineName8" class="mr20">[行4]</label>
                </span>
                <span class="check-group">
                    <input type="radio" id="lineName9" name="lineName" value="row-line5">
                    <label for="lineName9" class="ui-radio"></label>
                    <label for="lineName9" class="mr20">[行末]</label>
                </span>
            </p>
        </dd>

        <div class="grid-template-areas">
            <dt>grid-template-areas(点我开关)</dt>
            <dd>
                <span class="check-grop">
                    <input type="radio" id="areas-columns" name="areas-columns" value="80px auto 100px" >
                    <label for="areas-columns" class="mr20">
                        grid-template-columns: 80px auto 100px;
                    </label>
                </span>
            </dd>
            <dd>
                <span class="check-grop">
                    <input type="radio" id="areas-rows" name="areas-rows" value="25% 100px auto 60px" >
                    <label for="areas-rows" class="mr20">
                        grid-template-rows: 25% 100px auto 60px;
                    </label>
                </span>
            </dd>
            <dd>
                <span class="check-grop">
                    <input type="radio" id="areas-areas" name="areas-areas"  value='"葡萄 葡萄 葡萄" "龙虾 养鱼 养鱼" "龙虾 养鱼 养鱼" "西瓜 西瓜 西瓜"'>
                    <label for="areas-areas" class="mr20">
                        grid-template-areas:  "葡萄 葡萄 葡萄" "龙虾 养鱼 养鱼" "龙虾 养鱼 养鱼" "西瓜 西瓜 西瓜";
                    </label>
                </span>
                <pre  class="language-html line-numbers">
                    <code>
                        &lt;div class="container"&gt;
                            &lt;div class="putao"&gt;&lt;/div&gt;
                            &lt;div class="longxia"&gt;&lt;/div&gt;
                            &lt;div class="yangyu"&gt;&lt;/div&gt;
                            &lt;div class="xigua"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    </code>
                </pre>
                <pre class="language-css line-numbers">
                    <code>
                        .putao { grid-area: 葡萄; }
                        .longxia { grid-area: 龙虾; }
                        .yangyu { grid-area: 养鱼; }
                        .xigua { grid-area: 西瓜; }
                    </code>
                </pre>
            </dd>
        </div>
        <dt> grid-template</dt>
        <dd>
            grid-template: <grid-template-rows> / <grid-template-columns>;
        </dd>
        <dd>
            由于grid-template不会重置一些隐式的grid属性（如grid-auto-columns，grid-auto-rows和grid-auto-flow），
        </dd>
        <dd>
            因此，大多数时候，还是推荐使用grid代替grid-template。
        </dd>
        <dt>grid-column-gap和grid-row-gap</dt>
        <dd>grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸</dd>
        <dt>grid-gap</dt>
        <dd>grid-gap: <grid-row-gap> <grid-column-gap>;</dd>
        <div style="background-color: aquamarine;">
            <dt>justify-items</dt>
            <dd>justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐</dd>
            <dd>justify-items: stretch | start | end | center;</dd>
            <dt>align-items</dt>
            <dd>align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐</dd>
            <dd>align-items: stretch | start | end | center;</dd>
            <dt>place-items</dt>
            <dd>place-items可以让align-items和justify-items属性写在单个声明中</dd>
            <dd>place-items: <align-items> <justify-items>?;</dd>
            <dd>align-items在前，justify-items在后。首字母a,j</dd>
        </div>
        <div style="background-color:cadetblue;">
            <dt>justify-content</dt>
            <dd>justify-content指定了网格元素的水平分布方式。此属性仅在网格总宽度小于grid容器宽度时候有效果</dd>
            <dd>justify-content: stretch | start | end | center | space-between | space-around | space-evenly;</dd>
            <dt>align-content</dt>
            <dd>justify-content指明水平方向grid子项的分布方式，而align-content则是指明垂直方向每一行grid元素的分布方式</dd>
            <dd>align-content: stretch | start | end | center | space-between | space-around | space-evenly;</dd>
            <dt>place-content</dt>
            <dd>place-content可以让align-content和justify-content属性写在一个CSS声明中</dd>
            <dd>place-content: <align-content> <justify-content>?;</dd>
            <dd>align-content在前，justify-content在后。首字母a,j</dd>
        </div>
        <div>
            <dl>
                <dt>grid-auto-columns 和 grid-auto-rows</dt>
                <dd>指定任何自动生成的网格轨道（也称为隐式网格轨道）的大小。 </dd>
                <dd>当网格项目多于网格中的单元格或网格项目放置在显式网格之外时，将创建隐式轨道。</dd>
                <dd> 在Grid布局中，这些非正常网格称为“隐式网格”，在规定容器内显示的称之为“显式网格”</dd>
                <dd> grid-auto-columns: <track-size> ...;</dd>
                <dd>
                    <pre class='language-css line-numbers'>
                        <code>
                            .container {
                                display: grid;
                                width: 150px;
                                grid-template-columns: 60px 60px;
                                grid-template-rows: 30px 90px;
                                grid-auto-columns: 60px;
                            }
                            .item-a { 
                                grid-column: 1 / 2;
                                grid-row: 2 / 3;
                            }
                            .item-b { 
                                /* 容器水平只有2个格子，但这里设定的是第3个，隐式网格创建 */
                                grid-column: 3 / 4;
                                grid-row: 2 / 3; 
                                background-color: rgba(255,255,0, .5);
                            }
                            /* .item-b宽度强制表现为了60px，否则，则表现为auto，
                            *    在这里，则是可怜巴巴填满剩余的30px (150 - [60 + 60]) */
                        </code>
                    </pre>
                </dd>
                <dt>grid-auto-flow</dt>
                <dd>grid-auto-flow属性控制没有明确指定位置的grid子项的放置方式</dd>
                <dd>比方说定义了一个5*2的10格子，共有5个元素，其中2个元素指定了放在哪个格子里，还有3个则自生自灭排列。</dd>
                <dd>此时，这3个元素如何排列就是由grid-auto-flow属性控制的。</dd>
                <dd>grid-auto-flow: row | column | row dense | column dense</dd>
                <dd>
                    <pre class="language-css line-numbers">
                        <code>
                            div[id="gridAutoFlow"] {
                                display: grid;
                                background-color: rgb(197, 247, 185);
                                grid-template: 1fr 1fr 1fr/1fr 2fr 2fr 1fr 2fr;
                            }
                            .item-a {
                                background-color:coral;
                                grid-column: 1;
                                grid-row: 2 / 4;
                            }
                            .item-b {
                                grid-row: 1 / 3;
                                background-color: yellow;
                            }
                            .item-c {
                                background-color: red;  
                            }
                            .item-d {
                                background-color: yellowgreen;
                            }
                            .item-e {
                                background-color:aqua;
                            }
                        </code>
                    </pre>
                    <div class="grid-radio-x jsGridRadio">
                        <span class="check-group">
                            <input type="radio" id="autoFlow1" name="gridAutoFlow" value="row" checked="">
                            <label for="autoFlow1" class="ui-radio"></label>
                            <label for="autoFlow1" class="mr20">row</label>
                        </span> <span class="check-group">
                            <input type="radio" id="autoFlow2" name="gridAutoFlow" value="column">
                            <label for="autoFlow2" class="ui-radio"></label>
                            <label for="autoFlow2" class="mr20">column</label>
                        </span> <span class="check-group">
                            <input type="radio" id="autoFlow3" name="gridAutoFlow" value="row dense">
                            <label for="autoFlow3" class="ui-radio"></label>
                            <label for="autoFlow3" class="mr20">row dense</label>
                        </span> <span class="check-group">
                            <input type="radio" id="autoFlow4" name="gridAutoFlow" value="column dense">
                            <label for="autoFlow4" class="ui-radio"></label>
                            <label for="autoFlow4">column dense</label>
                        </span>
                    </div>

                    <div id="gridAutoFlow" class="grid grid-base-13" style="grid-auto-flow: column dense;">
                        <div class="item-a">
                            <p class="grid-p">.item-a</p>
                        </div>
                        <div class="item-b">
                            <p class="grid-p">.item-b</p>
                        </div>
                        <div class="item-c">
                            <p class="grid-p">.item-c</p>
                        </div>
                        <div class="item-d">
                            <p class="grid-p">.item-d</p>
                        </div>
                        <div class="item-e">
                            <p class="grid-p">.item-e</p>
                        </div>
                    </div>
                </dd>
            </dl>
        </div>
        <dt>grid</dt>
        <dd>在Grid布局中，斜杠前面都是rows相关属性，斜杠后面都是columns相关属性</dd>
        <dd>CSS属性的缩写集合，grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow</dd>
        <dd>grid: &lt;grid-template-rows&gt; / [ auto-flow && dense? ] &lt;grid-auto-columns&gt;? </dd>
        <dd>grid: [ auto-flow && dense? ] &lt;grid-auto-rows&gt;? / &lt;grid-template-columns&gt;&lt;/grid-template-columns&gt;</dd>
        <dd>
            <li>grid:none    none表示设置所有的子属性为初始值</li>
        </dd>
        <dd>
            <li>如果网格布局中规中矩，没有哪个格子跑到grid容器外面，就是grid-template属性</li>
        </dd>
        <dd>
            <li>最后两个语法完全是出现了grid容器外面格子时候才使用的，要么grid-template/auto-flow，要么auto-flow/grid-template</li>
        </dd>
        </dl>
</div>


<div class="container-2">
    <div id="grid" class="grid grid-base-2 grid-template-areas" data-type="row-line5">
        <div class="grid-1-1">
            <p class="grid-p">宽80px<br>高25%</p>
        </div>
        <div class="grid-1-2">
            <p class="grid-p">宽auto<br>高25%</p>
        </div>
        <div class="grid-1-3">
            <p class="grid-p">宽100px<br>高25%</p>
        </div>
        <div class="grid-2-1">
            <p class="grid-p">宽80px<br>高100px</p>
        </div>
        <div class="grid-2-2">
            <p class="grid-p">宽auto<br>高100px</p>
        </div>
        <div class="grid-2-3">
            <p class="grid-p">宽100px<br>高100px</p>
        </div>
        <div class="grid-3-1">
            <p class="grid-p">宽80px<br>高auto</p>
        </div>
        <div class="grid-3-2">
            <p class="grid-p">宽auto<br>高auto</p>
        </div>
        <div class="grid-3-3">
            <p class="grid-p">宽100px<br>高auto</p>
        </div>
        <div class="grid-4-1">
            <p class="grid-p">宽80px<br>高60px</p>
        </div>
        <div class="grid-4-2">
            <p class="grid-p">宽auto<br>高60px</p>
        </div>
        <div class="grid-4-3">
            <p class="grid-p">宽100px<br>高60px</p>
        </div>
    </div>
</div>


<div>
    <div>
        <h1>作用在grid子项上的CSS属性</h1>
        <dt> grid-column-start, grid-column-end, grid-row-start和grid-row-end</dt>
        <dd>
            表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向
        </dd>
        <dd>grid-column-start: <number> | <name> | span <number> | span <name> | auto</dd>
        <dt>grid-column和grid-row</dt>
        <dd>前者是grid-column-start + grid-column-end的缩写</dd>
        <dd>后者是grid-row-start + grid-row-end的缩写</dd>
        <dd>grid-column: &lt;start-line&gt; / &lt;end-line&gt; | &lt;start-line&gt; / span &lt;value&gt;&lt;/value&gt;</dd>
        <dt>grid-area</dt>
        <dd>grid-area表示当前网格所占用的区域</dd>
        <dd>grid-template-areas属性自定义一些网格区域</dd>
        <dd>grid-area属性让grid子项指定使用这些区域，就自动进行了区域分布</dd>
        <dd>grid-area: &lt;name&gt; | &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;;</dd>
        <dd>
            &lt;name&gt; 区域名称。由grid-template-areas属性创建。
        </dd>
        <dd>
            &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt; 占据网格区域的纵横起始位置。
        </dd>
        <div class='gird-item-self'>
            <dt> justify-self</dt>
            <dd>
                justify-self表示单个网格元素的水平对齐方式
            </dd>
            <dd>justify-self: stretch | start | end | center;</dd>
            <dt>align-self</dt>
            <dd>align-self指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐</dd>
            <dd>
                align-self: stretch | start | end | center;
            </dd>
            <dt>place-self</dt>
            <dd>place-items可以让align-self和justify-self属性写在单个声明中</dd>
            <dd>place-self: &lt;align-self&gt; &lt;justify-self&gt;?</dd>
        </div>
    </div>
</div>

<div class="sticky">
    position: sticky
    top:o
</div>


{% endblock content %}